/*
 * @Description: 页面操作组件
 * @Author: Rfan
 * @Date: 2022-05-05 10:43:03
 * @LastEditTime: 2022-05-31 15:32:29
 */

import { useMemo, useState } from 'react';
import { Button, Divider, Space } from 'antd';
import AddDialog from './dialogs/AddDialog';
import { useMetadataAliasContext } from '../contexts/MetadataAliasContext';

const PageOperate = () => {
  const { selectItems, delAliasFunc } = useMetadataAliasContext();

  // 添加弹窗打开标志
  const [addDialogVisible, setAddDialogVisible] = useState(false);

  const showAddDialog = () => {
    setAddDialogVisible(true);
  };
  const hideAddDialog = () => {
    setAddDialogVisible(false);
  };

  return (
    <div className="filter-container">
      <p className="page-title">元数据别名设置</p>
      <Space>
        <Button
          onClick={() => {
            showAddDialog();
          }}
        >
          新建
        </Button>
        <Button
          disabled={selectItems.length <= 0}
          danger
          onClick={() => {
            delAliasFunc(selectItems);
          }}
        >
          删除
        </Button>
        <Divider type="vertical" />
        <Button disabled>筛选检索</Button>
      </Space>
      {useMemo(
        () => (
          <AddDialog
            visible={addDialogVisible}
            onClose={() => {
              hideAddDialog();
            }}
          />
        ),
        [addDialogVisible]
      )}
    </div>
  );
};

export default PageOperate;
